<template>
  <div class="yun-page">
    <div class="yun-card card1">
      <div class="yun-cardview yun-card1">
        <h3 class="yun-title">
          <span>—</span> <span class='yun-word'>DeFi and Polkadot Powered Prediction Markets</span> <span>—</span>
        </h3>
        <p class="yun-sbtitle">
          Polkamarkets is a DeFi-Powered Prediction Market built for cross-chain
          information exchange and trading where users can take positions on
          outcomes of real world events–in a decentralized and interoperable
          platform based on Polkadot.
        </p>
      </div>
    </div>
    <div class="yun-card card2">
      <div class='yun-abcard'>
        <div class='abcard-title'>Introduction</div>
        <div class='abcard-doc'>
          <p>At the intersection of DeFi and information exchange lies the Prediction Market: an area where traders can leverage their knowledge of the past, present and future to forecast specific, real world outcomes.</p>
          <p>The ability to profit off of information exchange and modeling has formed the basis for much of modern capital markets.</p>
          <p>With the rise of DeFi, traders are finding yield through decentralised exchange, lending, farming and providing liquidity for others to use. No current player in the market combines DeFi with prediction markets, until now.</p>
        </div>
      </div>
    </div>
    <div class="yun-card card3">
      <div class='yun-points'>
        <img src="@/assets/img/points.png" alt="">
      </div>
      <div class="yun-cardview yun-card3">
        <div class='yun-title'>The Problem</div>
        <div class='yun-doc'>
          <p>Currently, existing prediction markets suffer from key problems such as lack of liquidity & markets, lack of traders, and duplicate or confusing markets. Total prediction market volume averaged less than $1M USD per day in 2020 and even less in years prior.</p>
          <p>
            With such low volumes, it is impossible for traders to adequately hedge against future outcomes or take any sizable positions.
          </p>
          <p v-if='creenWidth>500'>
            With low volumes comes low liquidity and therefore low fees for platform providers due to the lack of active traders. A death spiral ensues as we have seen with existing prediction markets with virtually no users or daily volume.
          </p>
        </div>
      </div>
    </div>
    <div class="yun-card card4">
      <div class="yun-cardview yun-card4">
        <h3 class="yun-title">The Solution</h3>
        <div class="yun-doc">
          <p>Polkamarkets aims to solve the low usage & volume problems by incentivising liquidity providers and traders to facilitate & take large positions, while a system for curation and resolution ensures efficient and trustworthy markets. The platform will also leverage tried and tested DeFi incentives such as liquidity mining and yield farming to incentivise daily active use.
          </p>
          <p>As an “Entertainment DeFi Platform'', Polkamarkets will offer Sports and Esports daily markets with live feeds of events alongside forecasting. Users will be able to watch their favorite teams play while making live, in-play forecasts about the game’s outcome.</p>
          <p>Live odds and automated market makers will dynamically adjust odds based on users’ forecasts on the markets. As users trade outcome fractions, they will mine $POLK tokens that they can later use to open their own prediction markets on Polkamarkets.</p>
        </div>
      </div>
    </div>
    <div class='yun-card card5'>
      <div class='yun-vbg'>
           <div class='yun-points1'>
             <img src="@/assets/img/points.png" alt="">
           </div>
            <div class='yun-points2'>
              <img src="@/assets/img/points.png" alt="">
            </div>
        </div>
      <div class='yun-cardview yun-card5'>
          <h3 class='yun-title'>Our Team</h3>
          <div class='yun-list'>
            <div class='yun-item' v-for='(item,index) in teamList' :key='index'>
              <div class='item-head'>
                <div class='people-header'>
                  <img :src="item.img" alt="">
                </div>
                <div class='people-info'>
                  <p class='dptitle'>{{item.deptemt}}</p>
                  <p class='sbdeptemt'>{{item.sbdeptemt}}</p>
                </div>
                <div class='wx-qq'>
                  <img style='margin-right:20px;' src="@/assets/img/about/about-icon1.png" alt="">
                  <img src="@/assets/img/about/about-icon2.png" alt="">
                </div>
              </div>
              <div class='itemdoc'>{{item.doc}}</div>
            </div>
          </div>
      </div>
    </div>
    <div class='yun-card card6'>
       <div class="yun-cardview yun-card6">
         <div class='yun-title'>Roadmap Timeline</div>
          <div class='yun-roadmap'>
            <div class='roadmap-bg'></div>
            <div class='yun-list'>
              <div class='yun-item' @click="routeToPage('/react')">
                <div class='item-left'>
                  <div class='yun-item-title'>
                    <h3>React.js Developer</h3>
                    <p>Remote</p>
                  </div>
                  <div class='yun-new'>
                    <img src="@/assets/img/about/new.png" alt="">
                  </div>
                </div>
                <img class='aboutSan' src="@/assets/img/about/about-san.png" alt="">
              </div>
              <div class='yun-item' style='margin-top:30px;' @click="routeToPage('/solidity')">
                <div class='item-left'>
                  <div class='yun-item-title'>
                    <h3>Solidity Developer</h3>
                    <p>Remote</p>
                  </div>
                  <div class='yun-new'>
                    <img src="@/assets/img/about/new.png" alt="">
                  </div>
                </div>
                <img class='aboutSan' src="@/assets/img/about/about-san.png" alt="">
              </div>
            </div>
          </div>
          <div class='yun-sbtitle'>Would you like to join our team?</div>
          <div class='yun-tptitle'>We're always looking for talent</div>
       </div>
     </div>
    <div class="yun-card card7">
       <div class='blue-card'></div>
      <div class="yun-cardview yun-card7">
        <div class='yun-points'>
          <img src="@/assets/img/points.png" alt="">
        </div>
        <div class='yun-left'>
          <h3 class='yun-title'>Whitelisting is open. Check Tokenomics.</h3>
          <div class='yun-btn'>Join Telegram</div>
        </div>
        <div class='yun-right'>
          <img src="@/assets/img/card7.png" alt="">
        </div>
      </div>
      
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      teamList: [
        {
          img: require("@/assets/img/about/people1.png"),
          deptemt: "Ricardo Marques",
          sbdeptemt: "Co-founder and CEO",
          doc:
            "A serial entrepreneur with several ventures launched in the prediction market space. He has over a decade of experience as a full-stack developer and software engineer.",
        },
        {
          img: require("@/assets/img/about/people2.png"),
          deptemt: "Francisco Lourenço",
          sbdeptemt: "Co-founder and CMO",
          doc:
            "A marketing leader with more than 10 years experience in disrupting big companies' go-to market strategies, specializing in digital and social campaigns.",
        },
        {
          img: require("@/assets/img/about/people3.png"),
          deptemt: "Henrique Caiano",
          sbdeptemt: "Product Advisor",
          doc:
            "With 10 years of experience creating products in the tech and blockchain worlds. Serial entrepreneur and product owner for multiple SaaS and consumer products.",
        },
        {
          img: require("@/assets/img/about/people4.png"),
          deptemt: "Rui Teixeira",
          sbdeptemt: "Co-founder and BM",
          doc:
            "CEO and co-founder of bepro.network, a blockchain-based SaaS empowering businesses and entrepreneurs to launch Esports gaming platforms. Rui is a serial entrepreneur and  has +5 years experience with blockchain product ",
        },
      ],
      creenWidth: document.body.clientWidth,
    };
  },
  methods:{
    routeToPage(path){
      this.$router.push(path)
    }
  }
};
</script>
<style lang='scss' scoped>
.yun-page {
  max-width: 1920px;
  margin: 0 auto;
  .yun-card {
    width: 100%;
    position: relative;
    &.card1 {
      width: 100%;
      height: 787px;
      background-image: url("~@/assets/img/about/aboutbg1.png");
      background-size: 100% 100%;
    }
    &.card2 {
      width: 100%;
      height: 646px;
      background-image: url("~@/assets/img/about/aboutbg2.png");
      background-size: 100% 100%;
    }

    &.card3 {
      width: 100%;
      height: 890px;
      background-image: url("~@/assets/img/about/aboutbg3.png");
      background-size: 100% 100%;
      .yun-points {
        position: absolute;
        bottom: 30px;
        left: 20px;
      }
    }
    &.card4 {
      width: 100%;
      height: 876px;
      background-image: url("~@/assets/img/about/aboutbg4.png");
      background-size: 100% 100%;
    }
    &.card5 {
      width: 100%;
      height: 1289px;
      background: #fff;
      .yun-vbg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -40%);
        width: 1769px;
        height: 679px;
        background: #e2eff8;
        .yun-points1 {
          position: absolute;
          left: -120px;
          top: -80px;
        }
        .yun-points2 {
          position: absolute;
          right: -120px;
          bottom: -180px;
        }
      }
    }
    &.card6 {
      width: 100%;
      height: 840px;
      background-image: url("~@/assets/img/about/aboutbg6.png");
      background-size: 100% 100%;
    }
    &.card7 {
      width: 100%;
      height: 660px;
      background: #fff;
      .blue-card {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 867px;
        height: 545px;
        background: #e2eff8;
      }
    }
    .yun-abcard {
      width: 1225px;
      height: 695px;
      background: #ffffff;
      box-shadow: 0px 28px 68px 0px rgba(15, 23, 115, 0.15);
      border-radius: 10px;
      margin: 0 auto;
      position: relative;
      top: -117px;

      .abcard-title {
        padding: 45px 45px 25px;
        // border-bottom: 1px dashed #31313b;
        font-size: 72px;
        font-family: Pill Alt;
        font-weight: 500;
        color: #31313b;
        line-height: 48px;
        text-align: center;
      }
      .abcard-doc {
        padding: 45px;
        font-size: 28px;
        font-family: Pill Alt;
        font-weight: 400;
        color: #31313b;
        line-height: 48px;
        text-align: center;
        p {
          margin-bottom: 40px;
        }
      }
    }
    .yun-cardview {
      width: 1365px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      &.yun-card1 {
        padding-top: 0px;
        .yun-title {
          font-size: 36px;
          font-family: Pill Alt;
          font-weight: bold;
          color: #31313b;
          line-height: 72px;
          text-align: center;
        }
        .yun-sbtitle {
          margin-top: 30px;
          font-size: 33px;
          font-family: Pill Alt;
          font-weight: 400;
          color: #828282;
          line-height: 48px;
          text-align: center;
        }
        .yun-btn {
          width: 222px;
          height: 69px;
          border: 2px solid #404fe0;
          border-radius: 8px;
          margin: 100px auto;
          font-size: 24px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #404fe0;
          text-align: center;
          line-height: 69px;
          cursor: pointer;
        }
      }
      &.yun-card3 {
        .yun-title {
          font-size: 72px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #31313b;
          line-height: 48px;
          text-align: center;
        }
        .yun-doc {
          margin-top: 60px;
          font-size: 28px;
          font-family: Pill Alt 600mg;
          font-weight: 400;
          color: #31313b;
          line-height: 48px;
          text-align: center;
          p {
            margin-bottom: 40px;
          }
        }
      }
      &.yun-card4 {
        .yun-title {
          font-size: 72px;
          font-family: Pill Alt;
          font-weight: 500;
          color: #fff;
          line-height: 48px;
          text-align: center;
        }
        .yun-doc {
          margin-top: 60px;
          font-size: 28px;
          font-family: Pill Alt;
          font-weight: 400;
          color: #fff;
          line-height: 48px;
          text-align: center;
          p {
            margin-bottom: 40px;
          }
        }
      }
      &.yun-card5 {
        .yun-title {
          text-align: center;
          font-size: 72px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #000000;
          margin-top: 30px;
        }
        .yun-list {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          margin-top: 60px;
          .yun-item {
            width: 47%;
            margin: 0 1.5%;
            height: 402px;
            background: #ffffff;
            box-shadow: 0px 13px 49px 0px rgba(14, 25, 152, 0.32);
            border-radius: 10px;
            padding: 35px;
            margin-bottom: 45px;
            cursor: pointer;
            &:hover{
              transform: scale(1.1);
            }
            .item-head {
              width: 100%;
              display: flex;
              position: relative;
              .wx-qq {
                position: absolute;
                right: 0;
                top: 0;
                display: flex;
                img {
                  height: 28px;
                }
              }
              .people-header {
                width: 148px;
                height: 148px;
                img {
                  width: 100%;
                }
              }
              .people-info {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                margin-left: 35px;
                .dptitle {
                  font-size: 36px;
                  font-family: Pill Alt;
                  font-weight: 500;
                  color: #31313b;
                  line-height: 48px;
                }
                .sbdeptemt {
                  font-size: 30px;
                  font-family: Pill Alt;
                  font-weight: 300;
                  color: #31313b;
                  line-height: 48px;
                }
              }
            }
            .itemdoc {
              margin-top: 35px;
              font-size: 24px;
              font-family: Pill Alt 600mg;
              font-weight: 400;
              color: #31313b;
              line-height: 30px;
            }
          }
        }
      }
      &.yun-card6 {
        width: 1616px;
        .yun-title {
          font-size: 72px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #fefeff;
          line-height: 30px;
          text-align: center;
          margin-top: 60px;
        }
        .yun-sbtitle {
          font-size: 36px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #ffffff;
          line-height: 30px;
          text-align: center;
          margin-top: 45px;
        }
        .yun-tptitle {
          font-size: 28px;
          font-family: Pill Alt 600mg;
          font-weight: 400;
          color: #dbdada;
          line-height: 30px;
          text-align: center;
          margin-top: 15px;
        }
        .yun-roadmap {
          position: relative;
          margin-top: 60px;
          .roadmap-bg {
            width: 100%;
            height: 435px;
            background: #e2eff8;
            border-radius: 10px;
          }
          .yun-list {
            width: 1365px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .yun-item {
              width: 100%;
              padding: 30px 60px;
              background: #ffffff;
              box-shadow: 0px 19px 54px 0px rgba(58, 68, 179, 0.48);
              border-radius: 10px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              cursor: pointer;
              .item-left {
                display: flex;
                align-items: center;
              }
              .yun-item-title {
                h3 {
                  font-size: 36px;
                  font-family: Pill Alt;
                  font-weight: 500;
                  color: #31313b;
                }
                P {
                  font-size: 24px;
                  font-family: Pill Alt;
                  font-weight: 500;
                  color: #31313b;
                }
              }
              .yun-new {
                width: 72px;
                margin-left: 60px;
                img {
                  width: 100%;
                }
              }
              .aboutSan {
                width: 17px;
                img {
                  width: 100%;
                }
              }
            }
          }
        }
      }
      &.yun-card7 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .yun-points {
          position: absolute;
          left: 42%;
          top: 80px;
        }
        .yun-left {
          width: 640px;
          .yun-title {
            font-size: 60px;
            font-family: Pill Alt;
            font-weight: 500;
            color: #31313b;
          }
          .yun-btn {
            width: 222px;
            height: 69px;
            background: #404fe0;
            box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
            border-radius: 8px;
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
            line-height: 69px;
            margin-top: 100px;
          }
        }
        .yun-right {
          width: 588px;
          // height:690px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }
      &.yun-card8 {
        .yun-title {
          font-size: 72px;
          font-family: Pill Alt;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
        }
        .yun-sbtitle {
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 100;
          color: #ffffff;
          line-height: 30px;
          text-align: center;
          margin-top: 15px;
        }
        .yun-list {
          margin-top: 60px;
          .yun-card-item {
            padding: 0 55px;
            background: #fff;
            margin-bottom: 40px;
            .yun-card-head {
              width: 100%;
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              background: #fff;
              cursor: pointer;
              span {
                font-size: 34px;
                font-family: Pill Alt 600mg;
                font-weight: 500;
                color: #202029;
              }
              i {
                display: block;
                width: 22px;
                height: 17px;
                background-image: url("~@/assets/img/home/icon-down.png");
                background-size: 100% 100%;
              }
            }
            .yun-card-cont {
              width: 100%;
              height: 0;
              overflow: hidden;
              border-top: 0px solid #3643cf;
              padding: 0 0;
              p {
                font-size: 28px;
                font-family: PingFang SC;
                font-weight: 300;
                color: #5d5d5d;
                line-height: 36px;
                margin-bottom: 20px;
                span {
                  color: #404fe0;
                }
              }
            }
            &.active {
              .yun-card-head {
                span {
                  color: #3643cf;
                }
                i {
                  display: block;
                  width: 22px;
                  height: 17px;
                  background-image: url("~@/assets/img/home/icon-up.png");
                  background-size: 100% 100%;
                }
              }
              .yun-card-cont {
                height: auto;
                border-top: 3px solid #3643cf;
                padding: 40px 0;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .yun-page {
    max-width: 1920px;
    margin: 0 auto;
    .yun-card {
      width: 100%;
      position: relative;
      &.card1 {
        width: 100%;
        height: 741px;
        background-image: url("~@/assets/img/app/about/bg1.png");
        background-size: 100% 100%;
      }
      &.card2 {
        width: 100%;
        height: 1057px;
        background-image: url("~@/assets/img/app/about/bg2.png");
        background-size: 100% 100%;
      }

      &.card3 {
        width: 100%;
        height: 819px;
        background-image: url("~@/assets/img/app/about/bg3.png");
        background-size: 100% 100%;
        .yun-points {
          position: absolute;
          bottom: 30px;
          left: 20px;
          width:8rem;
          img{
            width:100%;
          }
        }
      }
      &.card4 {
        width: 100%;
        height: 1430px;
        background-image: url("~@/assets/img/app/about/bg4.png");
        background-size: 100% 100%;
      }
      &.card5 {
        width: 100%;
        height: auto;
        background: #fff;
        .yun-vbg {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 96%;
          height: 90%;
          background: #e2eff8;
          .yun-points1 {
            position: absolute;
            left: -40px;
            top: -40px;
            width:8rem;
            img{
              width:100%;
            }
          }
          .yun-points2 {
            position: absolute;
            right: -40px;
            bottom: -120px;
            width:8rem;
            img{
              width:100%;
            }
          }
        }
      }
      &.card6 {
        width: 100%;
        height: 923px;
        background-image:  url("~@/assets/img/app/about/bg5.png");
        background-size: 100% 100%;
      }
      &.card7 {
        width: 100%;
        height: auto;
        background: #fff;
        .blue-card {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 90%;
          height: 40%;
          background: #e2eff8;
        }
      }
      .yun-abcard {
        width: 90%;
        height: auto;
        background: #ffffff;
        box-shadow: 0px 28px 68px 0px rgba(15, 23, 115, 0.15);
        border-radius: 10px;
        margin: 0 auto;
        position: relative;
        top: -80px;
        .abcard-title {
          padding: 30px 30px 0px;
          font-size: 48px;
          font-family: Pill Alt;
          font-weight: 500;
          color: #31313b;
          line-height: 48px;
          text-align: center;
        }
        .abcard-doc {
          padding: 20px;
          font-size: 24px;
          font-family: Pill Alt;
          font-weight: 400;
          color: #31313b;
          line-height: 36px;
          text-align: center;
          p {
            margin-bottom: 20px;
          }
        }
      }
      .yun-cardview {
        width: 100%;
        position: static;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        &.yun-card1 {
          padding: 30px 15px;
          .yun-title {
            font-size: 28px;
            font-family: Pill Alt;
            font-weight: bold;
            color: #31313b;
            line-height: 56px;
            text-align: center;
            display: flex;
            align-items: center;
            // .yun-word{
            //   width:60%;
            // }
          }
          .yun-sbtitle {
            margin-top: 30px;
            font-size: 24px;
            font-family: Pill Alt;
            font-weight: 400;
            color: #828282;
            line-height: 36px;
            text-align: center;
            
          }
          .yun-btn {
            width: 222px;
            height: 69px;
            border: 2px solid #404fe0;
            border-radius: 8px;
            margin: 100px auto;
            font-size: 24px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #404fe0;
            text-align: center;
            line-height: 69px;
            cursor: pointer;
          }
        }
        &.yun-card3 {
          width:100%;
          padding-top:30px;
          .yun-title {
            font-size: 48px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #31313b;
            line-height: 48px;
            text-align: center;
            padding:0 15px;
          }
          .yun-doc {
            margin-top: 20px;
            font-size: 28px;
            font-family: Pill Alt 600mg;
            font-weight: 400;
            color: #31313b;
            line-height: 36px;
            text-align: center;
            padding:0 15px;
            p {
              margin-bottom: 20px;
            }
          }
        }
        &.yun-card4 {
          padding-top:40px;
          .yun-title {
            font-size: 48px;
            font-family: Pill Alt;
            font-weight: 500;
            color: #fff;
            line-height: 48px;
            text-align: center;
            padding:0 15px;
          }
          .yun-doc {
            margin-top:30px;
            font-size: 24px;
            font-family: Pill Alt;
            font-weight: 400;
            color: #fff;
            line-height: 34px;
            text-align: center;
            padding:0 15px;
            p {
              margin-bottom: 20px;
            }
          }
        }
        &.yun-card5 {
          .yun-title {
            text-align: center;
            font-size: 48px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #000000;
            margin-top: 20px;
          }
          .yun-list {
            display: block;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 40px;
            padding: 0 15px;
            .yun-item {
              width: 100%;
              margin:0;
              height: auto;
              background: #ffffff;
              box-shadow: 0px 13px 49px 0px rgba(14, 25, 152, 0.32);
              border-radius: 10px;
              padding: 20px;
              margin-bottom: 30px;
              .item-head {
                width: 100%;
                display: flex;
                position: relative;
                .wx-qq {
                  position: absolute;
                  right: 0;
                  top: 0;
                  display: flex;
                  img {
                    height: 28px;
                  }
                }
                .people-header {
                  width: 100px;
                  height: 100px;
                  img {
                    width: 100%;
                  }
                }
                .people-info {
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-end;
                  margin-left: 35px;
                  .dptitle {
                    font-size: 20px;
                    font-family: Pill Alt;
                    font-weight: 500;
                    color: #31313b;
                    line-height: 30px;
                  }
                  .sbdeptemt {
                    font-size: 18px;
                    font-family: Pill Alt;
                    font-weight: 300;
                    color: #31313b;
                    line-height: 28px;
                  }
                }
              }
              .itemdoc {
                margin-top: 20px;
                font-size: 24px;
                font-family: Pill Alt 600mg;
                font-weight: 400;
                color: #31313b;
                line-height: 30px;
              }
            }
          }
        }
        &.yun-card6 {
          width: 100%;
          padding-top:80px;
          .yun-title {
            font-size: 48px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #fefeff;
            line-height: 60px;
            text-align: center;
            margin-top: 30px;
          }
          .yun-sbtitle {
            font-size: 24px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #ffffff;
            line-height: 30px;
            text-align: center;
            margin-top: 35px;
          }
          .yun-tptitle {
            font-size: 18px;
            font-family: Pill Alt 600mg;
            font-weight: 400;
            color: #dbdada;
            line-height: 30px;
            text-align: center;
            margin-top: 30px;
          }
          .yun-roadmap {
            position: relative;
            margin-top: 30px;
            .roadmap-bg {
              width: 100%;
              height: 300px;
              background: #e2eff8;
              border-radius: 10px;
            }
            .yun-list {
              width: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              padding:0 10px;
              .yun-item {
                width: 100%;
                padding: 20px;
                background: #ffffff;
                box-shadow: 0px 19px 54px 0px rgba(58, 68, 179, 0.48);
                border-radius: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                .item-left {
                  display: flex;
                  align-items: center;
                }
                .yun-item-title {
                  h3 {
                    font-size: 22px;
                    font-family: Pill Alt;
                    font-weight: 500;
                    color: #31313b;
                  }
                  P {
                    font-size: 18px;
                    font-family: Pill Alt;
                    font-weight: 500;
                    color: #31313b;
                  }
                }
                .yun-new {
                  width: 72px;
                  margin-left: 20px;
                  img {
                    width: 100%;
                  }
                }
                .aboutSan {
                  width: 17px;
                  img {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
       &.yun-card7 {
          position: static;
          top: 0;
          left: 0;
          transform: translate(0, 0);
          display: block;
          // justify-content: space-between;
          // align-items: center;
          .yun-points {
            position: absolute;
            left: 5%;
            top: 40%;
            width:8rem;
            img{
              width:100%;
            }
          }
          .yun-left {
            width: 100%;
            text-align: center;
            margin-top:60px;
            .yun-title {
              font-size: 48px;
              font-family: Pill Alt;
              font-weight: 500;
              color: #31313b;
            }
            .yun-btn {
              width: 222px;
              height: 69px;
              background: #404fe0;
              box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
              border-radius: 8px;
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #ffffff;
              text-align: center;
              line-height: 69px;
              margin:40px auto;
            }
          }
          .yun-right {
            width: 100%;
            // height:690px;
            overflow: hidden;
            margin-top:60px;
            img {
              width: 100%;
            }
          }
        }
        &.yun-card8 {
          .yun-title {
            font-size: 72px;
            font-family: Pill Alt;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
          }
          .yun-sbtitle {
            font-size: 28px;
            font-family: PingFang SC;
            font-weight: 100;
            color: #ffffff;
            line-height: 30px;
            text-align: center;
            margin-top: 15px;
          }
          .yun-list {
            margin-top: 60px;
            .yun-card-item {
              padding: 0 55px;
              background: #fff;
              margin-bottom: 40px;
              .yun-card-head {
                width: 100%;
                height: 96px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: #fff;
                cursor: pointer;
                span {
                  font-size: 34px;
                  font-family: Pill Alt 600mg;
                  font-weight: 500;
                  color: #202029;
                }
                i {
                  display: block;
                  width: 22px;
                  height: 17px;
                  background-image: url("~@/assets/img/home/icon-down.png");
                  background-size: 100% 100%;
                }
              }
              .yun-card-cont {
                width: 100%;
                height: 0;
                overflow: hidden;
                border-top: 0px solid #3643cf;
                padding: 0 0;
                p {
                  font-size: 28px;
                  font-family: PingFang SC;
                  font-weight: 300;
                  color: #5d5d5d;
                  line-height: 36px;
                  margin-bottom: 20px;
                  span {
                    color: #404fe0;
                  }
                }
              }
              &.active {
                .yun-card-head {
                  span {
                    color: #3643cf;
                  }
                  i {
                    display: block;
                    width: 22px;
                    height: 17px;
                    background-image: url("~@/assets/img/home/icon-up.png");
                    background-size: 100% 100%;
                  }
                }
                .yun-card-cont {
                  height: auto;
                  border-top: 3px solid #3643cf;
                  padding: 40px 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
